<template>
	<view class="content">
		<view class="input-group">
		    <view class="input-row border">
		        <text class="title">账号：</text>
		        <m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号"></m-input>
		    </view>
		    <view class="input-row border">
		        <text class="title">密码：</text>
		        <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
		    </view>
		</view>
		<m-button text="登陆" :rotate="isRotate" @click.native = "startLogin()"></m-button>
	</view>
</template>
<script>
	import mInput from '@/components/m-input/m-input.vue';
	import mButton from '@/components/m-button/m-button.vue';
	
	export default {
	    components: {
	        mInput,
			mButton
	    },
		data(){
			return {
				isRotate: false,
				account: "",
				password: ""
			}
		},
		methods:{
			startLogin(){	//	登陆
				this.isRotate = true;
				uni.reLaunch({
				    url: '/pages/home/home'
				});
				uni.showToast({
					title: '登陆成功',
					icon: 'none',
					position: 'top'
				});
			}
		}
	}
</script>

<style>
	@import url("/common/uni.css");
	
	.content{
		padding: 20px;
	}
	.input-group {
		background-color: #ffffff;
		margin-top: 40upx;
		position: relative;
	}
	
	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1upx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	
	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1upx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	
	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
	}
	
	.input-row .title {
		width: 20%;
		height: 50upx;
		min-height: 50upx;
		padding: 15upx 0;
		padding-left: 30upx;
		line-height: 50upx;
	}
	.input-row.border::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 15upx;
		height: 1upx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	
</style>